<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="mehm" uri="/WEB-INF/tld/mehmTagPortlet.tld"%>

<% pageContext.setAttribute("year", new org.joda.time.DateTime().getYear());%>

<tiles:insertTemplate template="/WEB-INF/template/template001.jsp" flush="true" >

<tiles:putAttribute name="title" cascade="true">Portfull</tiles:putAttribute>
<tiles:putAttribute name="keywords" cascade="true">dinheiro, publicidade</tiles:putAttribute>
<tiles:putAttribute name="description" cascade="true">ganhe dinheiro</tiles:putAttribute>

<tiles:putAttribute name="css_extension" cascade="true">
    
</tiles:putAttribute>

<tiles:putAttribute name="content" cascade="true">
    <script type="text/html" id="prateleira1">
        <%-- 
        Tentativa de customizar a listagem de portlets 
        <mehm:TagPortlet listPortlet="\${dados.vitrinaDTO.prateleira1()}"/> --%>
        
            <%-- Trabalhando na prateleira 1 --%>
            {{each(index, portlet) dados.vitrinaDTO.prateleira1()}}
            <li id="port_1_\${index+1}" class="portlets" >
                <%--
                <span>\${portlet.id}</span><br>
                <span>\${portlet.hint}</span><br>
                --%>
                <img src="\${portlet.url}"/><br>
            </li>
            {{/each}}
            
    </script>
    <%-- Trabalhando na prateleira 2 --%>
    <script type="text/html" id="prateleira2">            
            {{each(index, portlet) dados.vitrinaDTO.prateleira2()}}
                <li id="port_2_\${index+1}" class="portlets">
                    <%--
                    <span>\${portlet.id}</span><br>
                    <span>\${portlet.hint}</span><br>
                    --%>
                    <img src="\${portlet.url}"/><br>
                </li>
            {{/each}}
    </script>
    <%-- Trabalhando na prateleira 3 --%>
    <script type="text/html" id="prateleira3">            
            {{each(index, portlet) dados.vitrinaDTO.prateleira3()}}
                <a href="/portfull/portlet/description#/?idPortlet=\${portlet.id}">                
                    <li id="port_3_\${index+1}" class="portlets">
                        <%--
                        <span>\${portlet.id}</span><br>
                        <span>\${portlet.hint}</span><br>
                        --%>
                        <img src="\${portlet.url}" /><br>
                    </li>
                </a>
            {{/each}}
    </script>
    <%-- Trabalhando na prateleira Half --%>
    <script type="text/html" id="prateleiraHalf">        
        <img src="\${dados.vitrinaDTO.prateleiraHalf.url}"/><br>
    </script>
    <%-- Trabalhando na prateleira Full --%>
    <script type="text/html" id="prateleiraFull">
        <img src="\${dados.vitrinaDTO.prateleiraFull.url}"/><br>
    </script>
    <section>
        <div id="vitrina">
            <%-- --%>
            <!-- ko if: dados.vitrinaDTO.tipo() == 'NORMAL' -->
                <ul id="ul_prateleira1" data-bind="template: 'prateleira1'"></ul>
                <ul id="ul_prateleira2" data-bind="template: 'prateleira2'"></ul>
                <ul id="ul_prateleira3" data-bind="template: 'prateleira3'"></ul>
            <!-- /ko -->
          
            <!-- ko if: dados.vitrinaDTO.tipo() == 'HALF' -->
                <div class="portletHalf" data-bind="template: 'prateleiraHalf'">
                </div>
                <ul id="ul_prateleira3" data-bind="template: 'prateleira3'"></ul>
            <!-- /ko -->

            <!-- ko if: dados.vitrinaDTO.tipo() == 'FULL' -->
                <div class="portletFull" data-bind="template: 'prateleiraFull'">
                </div>
            <!-- /ko -->
           
        </div>
    </section>
    <br/>
    <section>
        <input type="button" value="Atualizar" name="Atualizar" data-bind="click: atualizar"/>
    </section>
</tiles:putAttribute>

<tiles:putAttribute name="js_extension" cascade="true">
    <script charset="utf-8" type="text/javascript">
    //<![CDATA[       
        
        var viewModel = {};
        viewModel.dados = {};

        viewModel.atualizar = function(){
            $.ajax({
                url:"<c:url value='/rest/vitrina/carregarPortlets/' />", 
                dataType:"json",
                type:"GET",
                cache: false,
                success: function(data, textStatus, jqXHR){
                    console.debug(data);
                    ko.mapping.fromJS(data, viewModel.dados);
                }
            });
        };       

        // primeira chamada
        $.ajax({
            url:"<c:url value='/rest/vitrina/carregarPortlets/' />",
            dataType:"json",
            type:"GET",
            cache: false,
            success: function(data, textStatus, jqXHR){
                console.debug(data);
                viewModel.dados = ko.mapping.fromJS(data);
                ko.applyBindings(viewModel);
            }
        });

        function detailPortlet() {
            var param = "1";
            $.ajax({
                url: "<c:url value='/rest/portlet/description/' />",
                dataType:"json",
                type:"POST",
                cache: false,
                data: "" + param,
                success: function(data, textStatus, jqXHR){
                    viewModel.dados = ko.mapping.fromJS(data);
                }
            });
        }
    //]]>
    </script>
</tiles:putAttribute>

</tiles:insertTemplate>
